import {Component, Inject, OnInit} from '@angular/core';
import * as DocumentEditor from 'src/assets/ckeditor/ckeditor5-build-decoupled-document/ckeditor';
import {MAT_DIALOG_DATA, MatDialog, MatDialogRef} from '@angular/material/dialog';

@Component({
    selector: 'app-ck-editor',
    templateUrl: './ck-editor.component.html',
    styleUrls: ['./ck-editor.component.less']
})
export class CkEditorComponent implements OnInit {


    Editor = DocumentEditor;
    config = {
        removePlugins: ['MediaEmbed'],
        wordCount: {displayWords: false},
        exportPdf: {
            fileName: 'my-file.pdf',
            converterOptions: {
                format: 'A4',
                margin_top: '20mm',
                margin_bottom: '20mm',
                margin_right: '12mm',
                margin_left: '12mm',
                page_orientation: 'portrait'
            }
        }
    };
    editor;
    result;
    setValue = '<p>这是有值的</p><p>&nbsp;</p>'

    constructor(public dialog: MatDialog) {
    }

    ngOnInit(): void {

    }

    public onReady(editor) {
        this.editor = editor
        const div = document.createElement('div')
        div.classList.add('editor-container')
        const holder = editor.ui.getEditableElement().parentElement;
        div.appendChild(editor.ui.getEditableElement())
        holder.appendChild(editor.ui.view.toolbar.element)
        holder.appendChild(div)

        const wordCountPlugin = editor.plugins.get('WordCount');
        const wordCountWrapper = document.getElementById('word-count');
        wordCountWrapper.appendChild(wordCountPlugin.wordCountContainer);
    }

    public exportPdf() {
        this.dialog.open(DialogContentExampleDialogComponent,{
            width: '1250px',
            data: {content: '这是一个付费功能，查看代码'}
        })
        // this.editor.execute('exportPdf');
    }

    public getData() {
        console.log(this.editor)
        this.result = this.editor.getData()
    }

    public setDate() {
        this.editor.setData(this.setValue)
    }
}

@Component({
    selector: 'app-dialog-content-example-dialog',
    templateUrl: 'dialog-template.html',
})
export class DialogContentExampleDialogComponent {

    constructor(
        public dialogRef: MatDialogRef<DialogContentExampleDialogComponent>,
        @Inject(MAT_DIALOG_DATA) public data: DialogData) {}

}

export interface DialogData {
    content: string;
}